<template>
  <div>
    <el-table :data="tableDataProcessed" style="width: 100%;height: 300px">
      <el-table-column prop="startDate" label="开始阶段"></el-table-column>
      <el-table-column prop="endDate" label="结束阶段"></el-table-column>
      <el-table-column prop="stairs" label="阶梯段"></el-table-column>
      <el-table-column prop="electric" label="电力"></el-table-column>
      <el-table-column prop="electricityPrice" label="电价"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const tableDataProcessed = ref([]);
// mock假数据
const generateMockData = () => {
  const data = [];
  let baseElectricityPrice = 391;

  for (let hour = 0; hour <= 24; hour++) {
    for (let minute = 15; minute < 60; minute += 15) {
      // 跳过无效的 "24:15"
      if (hour === 24 && minute > 0) continue;

      const startDate = `${hour.toString().padStart(2, '0')}:${minute
          .toString()
          .padStart(2, '0')}`;
      const endDate = startDate;

      for (let i = 1; i <= 5; i++) {
        data.push({
          startDate,
          endDate,
          stairs: i.toString(),
          electric: i === 1 ? '52' : '0',
          electricityPrice: Math.floor(Math.random() * (400 - 300 + 1)) + 300,
        });
        baseElectricityPrice++;
        if (baseElectricityPrice > 395) baseElectricityPrice = 391;
      }
    }
  }

  return data;
}

const timeNames = ref([]);
const processTableData = () => {
  // 提取所有时间点
  timeNames.value = new Set(props.tableData.map(item => item.timeName));

  // 初始化结果数据结构
  const powerTypes = [
    {label: '水电', key: 'hydroPowerValue'},
    {label: '风电', key: 'windPowerValue'},
    {label: '光电', key: 'pvPowerValue'},
    {label: '核电', key: 'nuclearPowerValue'},
    {label: '其他', key: 'otherPowerValue'},
    {label: '总量', key: 'newEnergyPowerValue'}
  ];

  // 构建表格数据
  tableDataProcessed.value = powerTypes.map(powerType => {
    const row = {powerType: powerType.label};
    timeNames.value.forEach(timeName => {
      const value = props.tableData.find(item => item.timeName === timeName)[powerType.key] || 0;
      row[timeName] = value;
    });
    return row;
  });

  // 调试信息
  console.log('Processed Table Data:', tableDataProcessed.value);
};

// 监听 props.tableData 的变化
watch(
    () => props.tableData,
    (newVal) => {
      tableDataProcessed.value = generateMockData();
    },
    {immediate: true, deep: true} // 立即执行一次
);
</script>

<style lang="scss" scoped></style>